
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理员列表</title>
	
	<link rel="stylesheet" href="css/main.css" media="all">

	<script src="js/jquery.js" charset="utf-8"></script>
	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>
	
	<script>
		layui.use(['laydate','element','laypage','layer'], function(){});
	</script>

	<!-- 引入jquery类库 -->
	<script src="js/jquery-3.3.1.js"></script>


</head>
<body>

<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>管理员管理</cite></a>
              <a><cite>管理员列表</cite></a>
            </span>
	
	<button class="layui-btn x-right" style="margin-left: 10px;" 
		onclick="javascript:location.replace(location.href);">
		<i class="layui-icon">ဂ</i>&nbsp;&nbsp;刷新
	</button>
	<button class="layui-btn x-right " 
		onclick="add('添加管理员 ','admin_add.html','600','500')">
		<i class="layui-icon">&#xe608;</i>&nbsp;&nbsp;添加
	</button>
</div>	

<div class="x-body">
    <table class="layui-table">
		<thead>
		<tr>
			<th>序号</th>
			<th>管理员编号</th>
			<th>用户名</th>
			<th>密码</th>
			<th>头像</th>
			<th>注册时间</th>
			<th>状态</th>
			<th>操作</th>
		</tr>
		</thead>
        <tbody id="admin-tbody">

        </tbody>
    </table>

</div>


<script>

	// 请求获得管理员列表
	function getAdmins() {

		// 发起ajax
		$.ajax({
			url: 'http://localhost:8080/community/admin/admins',  // 请求地址
			// method: 'get', // 请求方式，默认Get请求
			// dataType: 'json' , // 返回数据格式，默认json
			// data: null, // 请求发送的数据

			// success: function(result) {

			// }
			// success: (result) => {

			// }
			success(result) { // 成功回调
				console.log(result);
				if(result.code === 200) { // 数据获取成功
					showAdmins(result.data)
				}
			},
			error(e) {	//	失败回调

			}

		})
	}
	getAdmins()

	// 渲染画面
	function showAdmins(admins) {

		$('#admin-tbody').empty()

		$(admins).each((index, admin) => {
			console.log(admin)
			console.log(index)

			let adminTr = $(`

				<tr>
					<td>${index+1}</td>
					<td>${admin.id}</td>
					<td>${admin.username}</td>
					<td>${admin.password}</td>
					<td>
					<img src="./images/${admin.header}" width="40px">
						</td>
					<td>${admin.createTime}</td>
					<td class="td-status">
						<span class="layui-btn layui-btn-normal"
							onclick="setState(${admin.id})">
							${admin.state? '禁用' : '启用'}
					</span>
					</td>
					<td class="td-manage">
						<a title="编辑" href="javascript:;"
							onclick="edit('编辑管理员','admin_add.html',${admin.id},'','510')"
							class="ml-5" style="text-decoration:none">
							<i class="layui-icon">&#xe642;</i>
						</a>

						<a title="删除" href="javascript:;" onclick="activity_del(this, ${admin.id})"
						   style="text-decoration:none">
							<i class="layui-icon">&#xe640;</i>
						</a>

					</td>
				</tr>
			`)

			$('#admin-tbody').append(adminTr)
		})
	}

	// 启用和禁用
	function setState(adminId) {
		console.log(adminId)

		$.ajax({
			url: 'http://localhost:8080/community/admin/admins/' + adminId,
			method: 'patch',
			success(result) {
				if(result.code === 200) {
					// 成功
					getAdmins()
				}
			},
			error() {}
		})

	}

	

	


	
</script>

</body>
</html>